@import "../var.less";
@import "../mixins/clearfix.less";

#busMonitor{
  .monitor-content{
    margin-top: 15px;position: relative;
    .table{margin-top: 0;}

    .content-map{
      height: calc(~"100vh - 48px - 45px - 32px");
      >.map-container{
        position: relative;height: 100%;box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);

        .map-right{
    			position: absolute;right: 10px;top:10px;z-index:182;padding: 0 15px;
    			width: 300px;box-shadow: @shadow-base;background: #fff;
    			transition:all @transition-time;

    			.title{
    				height: 36px;line-height: 36px;background: @primary-color;margin: 0 -15px;color:#fff;text-align: right;
    				>span{padding-left:10px;}
            >.text{float: left;width: calc(~"100% - 48px");text-align: center;}
    				>.tigger{
    					display: inline-block;border-left:1px solid darken(@primary-color, 8%);
    					.ivu-btn {height: 36px;width: 47px;vertical-align: top;text-align: center;}
    					.fa{font-size: 16px;vertical-align: middle;}
    				}
    			}
    			.table{
            margin: 10px 0;
    				td{border-right: 0;}
    			}

    			&.off{
    				width: 48px;height: 36px !important;overflow: hidden;
            .title{
              >.text{display: none;}
              >.tigger{border:none;}
            }
    			}

          li.active{
            background-color: @link-hover-color;
          }
    		}

        .maputil{
          position: absolute;right: 10px;bottom: 10px;
          >li{
            &:last-child{margin-bottom: 0;}
          }
        }
      }
    }

    .station-container{
      >.station-box{
        margin-top: 15px;
        .station{
          .clearfix();
          >.station-arrow{
            float: left;width: 170px;padding-top: 70px;
            >span{
              display: block;width: 152px;height: 106px;margin: 0 auto;
              background-repeat: no-no-repeat;background-position: center;
              line-height: 106px;font-size: 2em;color: #ffffff;font-weight: bold;
            }
          }

          >.station-line{
            width: calc(~"100% - 170px");position: relative;height: 300px;margin-left: 170px;padding-top: 100px;
            >.line{
              content: '';position: absolute;top: 100px;left: 0;right: 0;;height: 20px;
              background-color: #ff9800;border-radius: 10px;
            }
            .station-list{
              width: 100%;height: 100%;position: relative;margin: 0 auto;
              >li{
                float: left;position: relative;
                >.station-item{
                  width: 20px;text-align: center;margin: 0 auto;
                  >.station-icon{display: block;width: 16px;height: 16px;margin: 2px;}
                }
                &:first-child,&:last-child{
                  >.station-item>.station-icon{background-color: #ffffff;border-radius: 50%;}
                }
                >.station-car{
                  position: absolute;width: 65px;top: 0;transform: translateY(calc(~"-100% - 5px"));
                  &.in {left: calc(~"(100% - 65px) / 2");}
                  &.out{right: 0;transform: translate(50%,calc(~"-100% - 5px"));}
                  >.car-text{display: block;text-align: center;color: #125667;}
                  >.car-icon{
                    display: block;width: 65px;height: 31px;margin: 0 auto;
                    background-position: center;background-repeat: no-repeat;
                  }
                }
              }
            }
          }

          &.up{
            >.station-arrow>span{background-image: url(../../images/bus/arrow-up.png);text-align: right;padding-right: 30px;}
            >.station-line{
              .station-list>li{
                &:not(:first-child):not(:last-child){
                  .station-icon{
                    background-image: url(../../images/bus/arrow-up-sm.png);background-size: 100%;
                    background-repeat: no-repeat;background-position: center;
                  }
                }
                >.station-car>.car-icon{
                  background-image: url(../../images/bus/bus-o-u-r.png);
                  &.many{background-image: url(../../images/bus/bus-m-u-r.png);}
                }
                &:first-child{
                  >.station-car{
                    left: 0;transform: translate(-50%,calc(~"-100% - 5px"));
                    >.car-icon{
                      background-image: url(../../images/bus/bus-o-u-s.png);
                      &.many{background-image: url(../../images/bus/bus-m-u-s.png);}
                    }
                  }
                }
                &:last-child{
                  >.out{display: none;}
                }
              }
            }
          }
          &.down{
            >.station-arrow>span{background-image: url(../../images/bus/arrow-down.png);padding-left: 30px;}
            >.station-line{
              .station-list>li{
                float: right;
                &:not(:first-child):not(:last-child){
                  >.station-item>.station-icon{
                    background-image: url(../../images/bus/arrow-down-sm.png);background-size: 100%;
                    background-repeat: no-repeat;background-position: center;
                  }
                }
                >.station-car{
                  &.out{left: 0;transform: translate(-50%,calc(~"-100% - 5px"));}
                  >.car-icon{
                    background-image: url(../../images/bus/bus-o-d-r.png);
                    &.many{background-image: url(../../images/bus/bus-m-d-r.png);}
                  }
                }
                &:first-child{
                  >.station-car{
                    left: auto;right: 0;transform: translate(50%,calc(~"-100% - 5px"));
                    >.car-icon{
                      background-image: url(../../images/bus/bus-o-d-s.png);
                      &.many{background-image: url(../../images/bus/bus-m-d-s.png);}
                    }
                  }
                }
                &:last-child{
                  >.out{display: none;}
                }
              }
            }
          }
        }
      }
    }
  }
}
